Hace unos días hablábamos de la etiqueta span y los estilos, en concreto añadíamos estilos a un texto.
Siguiendo con la etiqueta span vamos a jugar con imágenes, nos situamos en plantilla Edición de HTML y justo antes de </body> añadimos <span class='imagen'/> con "imagen" creamos la clase para añadir los estilos. Guardamos los cambios y nos situamos justo antes de ]]></b:skin> para añadir los estilos y la imagen.
Como es lógico debemos saber el lugar donde añadiremos la imagen, para eso es bueno recordar lo siguiente:
top = Parte superiorbottom = Parte inferior
right= Derecha
left = Izquierda
height = Altura
width = Anchura
fixed = La imagen queda estática, fija al fondo
absolute = Posición asignada
Como ejemplo crearemos una clase. En esa clase especificamos que la imagen se sitúe a la izquierda y arriba del todo "left:0px;" "top:0;" le damos la anchura de la imagen que en este caso ocupará todo el ancho del blog "width:1100px" y añadimos altura "height:110px;" para que cuando hagamos uso del cursor la imagen quede estática añadimos position:fixed;
.imagen {
background:transparent url(url-imagen) no-repeat;
height:110px;
width:1100px;
left:0px;
top:0px;
position:fixed;
}
.imagen {
background:transparent url(url-imagen) no-repeat scroll 0 0;
height:168px;
width:444px;
top:0px;
left:0px;
position:absolute;
}
.imagen {
background:transparent url(url-imagen) no-repeat;
height:110px;
width:100px;
right:180px;
top:90px;
position:absolute;
}
.imagen{
background:transparent url(url-imagen) no-repeat;
height:130px;
right:260px;
bottom:75px;
width:130px;
position:fixed;
}
.imagen{
background:transparent url(url-imagen) no-repeat;
height:130px;
left:60px;
bottom:75px;
width:130px;
position:fixed;
}
.imagen{
background:transparent url(url-imagen);
height:20px;
width:1100px;
left:0px;
bottom:0px;
position:fixed;
}
necesito ayuda para crear un logo para mi blog.. "urbanflow94.tk" mi url blogpot es
http://noticias-urbanflow94.blogspot.com/
es dificil crear un logo..
no c ni como empezar..
no tengo la creatividad jeje
espero y me ayudes como siempre
Hola Gema...dos preguntas: ¿como haria para que esta imagen me sirviera como un enlace? y ¿si quisiera agregar otra imagen,tendria que hacer todo el procedimiento de nuevo y colocarle "imagen 2"?...Saludos y gracias de antemanos...
Muy buen Post, vamos a empezar a ponerlo en Practica, ya que un poco de traquilidadd no nos cae mal en medio de esta tormenta de los Script
Genial, como un curso básico de CSS. ;)
Y hablando de códigos, ¿podrías decirme cómo haces el efecto del menú Archivo expandible? Lo busqué aquí pero no estoy seguro de que hayas publicado el procedimiento.
;)Genial! :D Puedo aplicarse a un elemento del sidebar? No se si sera a mi pero no se ve muy bien la fechas de los comentarios. Saludos!
Hola gema intente esto pero cuando restauro tamaño la imagen se viene al centro junto con la cabezera y esto hace que se vea terrible.
no se si sea algo de Fixed o absolute????
Que consejo me das????
quisiera que quedara un fondo estatico aunque el tamaño no sea adecuado.
Un saludo y gra blog
Que bonito Gem@!! la verdad es que la propiedad fixed es muy buena ;-D gracias por explicarlo todo tan bien ;) un abrazo0 :D
yz Jorge Alberto Baez Perez yo soy nula respecto a imágenes, pero hay generadores que en cinco minutos creas un logo estupendo.
Mira en mi nube de etiquetas "generadores" y "todo fotos" seguro encuentras algo ;)
yz Kenneth Jack para que enlazara la imagen podemos suprimirla de la CSS sin tocar el resto de estilos.
En el código que añadimos a la plantilla en lugar de <span class='imagen'/> añadimos...
<span class='imagen'><a href='url-de-la-página'><img src='url-de-la-imagen'/></a></span>
Ahí también podemos añadir los estilos pero por comodidad los podemos dejar en la css de esa forma resulta creo, más sencillo.
Si añadimos más de una como bien dices cambiamos la clase para que no adquiera los mismos estilos que la primera imagen, podría ser imagen2 como cualquier otro nombre siempre que coincida el nombre de la clase con el de los estilos.
No sé si he sabido explicarme ;)
yz Saludos Henry, suerte ;)
yz Antony ¿a qué elemento te refieres?
yz Manuel de la Fuente mira aquí :)
yz Coyote sustituye position:absolute; por position:fixed; yo he probado y la imagen queda fija al fondo :)
yz Me alegra que te guste Jaime Trujillo Escobedo :)
Ohh, ya entendí. La palabra clave que buscaba era "expandible", no "deslizante", por eso no encontraba nada. :$
Gem@,
en esta ocasión, como observo que en las imágenes que publicas, al pincharlas, no se abren en ventana nueva, quisiera si me podrías decir como hacerlo por que en mi blog se abren y no sé como evitarlo.
He probado con las instrucciones que dás para el caso, sin conseguir resultado alguno salvo el de inhabilitar el botón derecho, que ya está activa la orden y me sirve para el post escrito, pero no para la imagen.
Un abrazo y ya veremos :S
yz Hola Susy!! El tema es sencillo pero podemos hacerlo mucho más sencillo aún.
Si accedes al blog por http://draft.blogger.com/ comprobarás que al añadir las imágenes el editor nos proporciona un código distinto al que nos daría si accedemos de forma tradicional.
El código sería algo así:
<div class="separator" style="clear: both; text-align: center;">
<a href="url de la imagen grande de /s1600-" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="url de la imagen que se muestra/s320/" /></a></div>
Lo que eliminamos está en negrita, es la imagen grande que hace de enlace y esa etiqueta casi al final </a> que sirve de cierre para el enlace.
El resto es la imagen tal y como se muestra y el código para ubicar la imagen, en definitiva lo que contiene la imagen es únicamente:
<img border="0" src="url de la imagen que se muestra/s320/" /> ;)
Gema podrias colocar en una nueva entrada lo de posts relacionados.
Hola Gema...hice todo, dos clases diferente, con su estilo diferente,las dos imagenes aparecieron....la primera(imagen1) la puedo manejar, la cambio de sitio, pero la segunda (email)queda en todo el medio del footer y no la puedo manejar,eso si el link le funciona, pero se queda abajo...le he variado el estilo, incluso le coloque el mismo de la otra imagen, pero nada..se quedo clavada en el fondo...ahora un detalle: si borro todo lo de primera imagen (clase y estilo)esta sube, pareciera que la primera imagen la bloquea... que habre echo malo..o que le faltara?..pasare luego...no hay apuro...Saludos y gracias de antemanos...
pd: aqui lo estoy probando: http://blogdepruebak1.blogspot.com/
Hola Gem@ en esta ocasión, y viendo lo que está pasando con nuestro "querido" Blogger, me gustaría invitarte a ti y a todos tus lectores a sumarse a una campaña para pedir alojamiento a Blogger mediante Twitter.
Esta es la entrada: Blogger...nos vas a oir
Espero tu opinión y tu apoyo!!
Saludos,
@TwittBoy
PROMESA
Qué será
cuando
callen los
labios
Cuál del
amor que
ha anidado
en los tuyos
será la
promesa
Qué oscura
paloma es
la luz del
silencio
Suspiro
Cambia de
rostro el
riachuelo
del pecho
Y el río
permanece
(Un abrazo a la Gema de Blogger)
yz Peliculas y TV les voy dando salida en el mismo orden que me las van pidiendo, de todas formas puedes mirar aquí, la explicación que pensaba dar es más o menos la misma.
Entradas relacionadas de Pizcos Blog
yz Kenneth Jack mueve el código de la etiqueta span más arriba por ejemplo antes de <div id='content-wrapper'> (no expandas la plantilla) cualquier sitio que no sea dentro de un div.
yz TwitterBoy ¿Blogger nos va a oír? allá vamos :)
yz Precioso Vonbonek :)
Gracias por la visita, es un lujo que un poema tuyo se quede a vivir en mi casa.
Abrazos...
Gracias Gem@,
ya lo sé para lo sucesivo, niña, ni lo puede imaginar!!!
:):):)
yz Son cosas que las tenemos delante y no caemos en la cuenta Susy, suele pasar :)
Hola Gema, te quería felicitar por tu excelente trabajo y te cuento que tengo 12 años y tengo un blog llamado http://tarometal.blogspot.com y te lo dejaba para que lo veas y opines que tal está...
Saludos Taroneitor.
yz Tarometallica me dejaste sin palabras ¿qué puedo decirte de tu blog? es sencillamente fantástico, está genial de verdad.
Lo creaste en Octubre del año pasado, es decir que lo tienes muy actualizado.
Felicitaciónes, no encuentro otras palabras :)
Gem@ oir, no creo que oigan mucho, pero por lo menos a veces contestan:
Mira este Tweet
Bueno, qué, te sumas a la campaña? hay un widget blanco para tu blog... jejeje!!!
Un beso!!
Gema... vengo a agradecer tu difusión del Día del Autismo en twitter, son empujones como éste los que ayudan a dar grandes pasos en un tema tan complicado.
Pero no solo vengo a eso, mas que nada vengo a dejar constancia que para mí eres mucho más que "gemablog", para mi eres muy grande en todos los sentidos.
Mil gracias, un abrazo como pocos se dan :D
yz Me sumo TwitterBoy ¡me sumo!! es que no me ha dado tiempo pero voy ya mismo ;)
yz Me dejas sin palabras Maite, mientras creaba un par de entradas para darle salida esta noche pensaba en ti, es cierto que corrí la voz en Twitter intentando hacer llegar hasta donde pudiera el día de hoy. Me dio la sensación de no llegar tan lejos como me gustaría y pensé en añadir ese precioso vídeo así que te adelantaste :) :) :)
Sabes que lo que esté en mis manos puedes considerarlo algo realizado y contar con ello.
Abrazos y ya sabes... hacia atrás ni para coger impulso ;)
Gema la de cosas que se pueden hacer con esto madre mia, mil gracias, haber si te gusta, aunque cada dia mi blog tarda mas en cargar, es que no paro de meterle chisme, voy a tener que empezar a quitarle cosas pero ya, pero no se por donde empezar.
www.bsodelcine.com
Nos hemos dejado sin palabras mutuamente Gema :D .Mil gracias.
yz Hola CALISTOR no me gusta me encanta :)
Es cierto que tarda un poquito en cargar pero no sé si es mi conexión porque lo estoy notando en todos los que visito.
Lo que si me di cuenta es de unas diferencias al visualizar tu blog con diferente navegador.
Con Firefox por ejemplo la sidebar se ve desplazada al fondo, no estoy muy segura porque no he podido ver el código fuente pero me inclino a pensar que las imágenes de las carteleras son de mayor tamaño que la sidebar.
Compruébalo tu mismo.
yz Maite ¿qué puedo añadir? mandarte más abrazos y darte las gracias por dejarme conocerte :)
Me temo que es la plantilla que uso, segun que resolucion, se aleja un poco mas de la central, a mi lo que me lleva de cabeza son dos cosas, los comentarios que no se donde ver la fuente de estos para hacerlos mas visibles y vistosos y lo de que aparezca la pagina con internet explorer en blanco y negro, aunque ya he oido que es un problema muy comun, gracias gema por tu dedicacion.
Hola Gema! Gracias por entrar a mi blog!!! te lo agradesco mucho...
Taroneitor
yz CALISTOR si quieres hacer los comentarios más vistosos hay varias formas.
Mira aquí
y aquí A lo mejor incluso lo solucionarías añadiendo un color de fondo.
El tema de visualizar con diferentes navegadores es muy complicado de solucionar, a veces se soluciona actualizando el navegador :)
yz Tarometallica no tienes que dármelas ;)
La cantidad de cosas que se pueden hacer con las imágenes así :) vaya! no lo había pensado así, cuando pueda iré probando, gracias Gemit@
besos ronroneados ^_^
Hola Gema...disculpa, no habia venido por algunos problemitas con la pc...te cuento: hice lo que dijiste, movi las etiquetas fuera de un div, es mas la rote por toda la plantilla y nada...solo puedo controlar una imagen, la otra queda estatica...¿sera algo en la plantilla? basicamente quisiera hacer algo parecido a lo de esta pagina, donde estan los icono de rss y email(subscribe)... espero no quitarte mucho de tu tiempo...Gracias de antemanos....
yz No había visto este comentario Kenneth, ahora ya es mu ytarde pero mañana lo primero que haga será ver ese problema ;)
yz Veamos.. en tu blog veo esto:
.rss {
height:110px;
width:100px;
right:270px;
top:100px;
position:absolute;
)
.email {
height:110px;
width:100px;
left:200px;
top:100px;
position:absolute;
)
Y no está mal pero mira lo que añadí yo:
.rss {
height:110px;
width:100px;
right:180px;
top:40px;
position:absolute;
}
.email {
height:110px;
width:100px;
right:250px;
top:45px;
position:absolute;
}
http://gemaforever.blogspot.com/
Debes ir cambiando el valor de la altura y ubicarlo hasta dar con el sitio.
MIL GRACIAS :D...estaba estancado en esto...Agradecido Inmensamente....Saludos...
Me refiero a los Widget. ;)
yz Antony no me había dado cuenta que mencionaste los comentarios.
Mira, en el script que añadimos para los últimos comentarios hay una parte que si la modificamos nos muestra la fecha es la siguiente:
var m_rc=false;
si en lugr de false ponemos true nos muestra la fecha.
Ahora si tu deseas añadir unos estilos a esa fecha o a cualquier parte de ese widget mejor mira esta entrada que actualicé.
aquí
Me han colocado imagenes publicitarias en mis blogs, justo encima de las imagenes que añado a mis escrito. ¿Como puedo quitarlos?
Nota: solo los miembros de este blog pueden publicar comentarios.